<?php
/**
 * Created by PhpStorm.
 * User: xushengbin
 * Date: 2017/12/17
 * Time: PM12:24
 */
?>
<style>

    body{
        background-color: #337ab7;
    }

    .footer{
        display: none;
    }
    input.has-error {
        border-color: red !important;
    }
    .device-info {
        float: left;
        width: 25%;
    }
    .device-info .link .row{
        text-align: center;
        line-height: 45px;
    }
    .device-info .link .btn {
        width: 140px;
    }

    .device-operation {
        float: right;
        width: 20%;
    }

    .device-operation .row {
        line-height: 45px;
        text-align: center;
        margin: 8px 0px;
    }

    .device-operation  .row button {
        width: 140px;
    }

    .work .row {
        /*text-align: center;*/
        margin: 0px 14px;
    }

    .work .row .btn.start {
        float: left;
    }

    .work .row .btn.pause {
        float: right;
    }

    #paramModal input {
        width: 100px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 2px 5px;
    }

    #paramModal table td {
        text-align: center;
    }
    #paramModal table tr:first-child td {
        border-top:none !important;
    }
    #paramModal .modal-dialog {
        min-width: 800px;
    }
    #paramModal table{
        margin-bottom: 0px !important;
    }

    .table-no-border td {
        border-top: none !important;
    }

    .btn.start, .btn.pause {
        padding: 10px 20px;
        font-size: 18px !important;
    }
</style>
<h3 style="color: yellow"> 设备名称：<strong class=""><?= @$_GET['deviceName'] ?></strong></h3>
<div class="content">
    <!--左侧-->
    <div class="device-info">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div>设备信息</div>
            </div>
            <div class="panel-body">
                <table class="table table-condensed table-no-border">
                    <tbody>
                    <tr>
                        <td>设备通讯状态：</td>
                        <td><?= empty($deviceInfo) ? '不正常' : '正常' ?></td>
                    </tr>
                    <tr>
                        <td>设备状态：</td>
                        <td><?= $deviceInfo['workData']['switch1_desc'] ?></td>
                    </tr>
                    <tr>
                        <td>设备工作模式：</td>
                        <td><?= $deviceInfo['workData']['model_desc'] ?></td>
                    </tr>
                    <tr>
                        <td>油位百分比：</td>
                        <td><?= $deviceInfo['trafficData']['traffic1'] ?>%</td>
                    </tr>
                    <tr>
                        <td>有油无油状态：</td>
                        <td>
                            <?php
                            if ($deviceInfo['trafficData']['traffic1'] >= $deviceInfo['trafficData']['traffic1Rate']) {
                                echo '有油';
                            } else {
                                echo '无油';
                            }
                            ?>
                        </td>
                    </tr>
                    <tr>
                        <td>日累计运行时长：</td>
                        <td><?= $deviceInfo['total']['onlineDuration'] ?>小时</td>
                    </tr>
                    <tr>
                        <td>日累计开关次数：</td>
                        <td><?= $deviceInfo['total']['openTimes'] ?>次</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--        启动、暂停-->
        <div class="panel panel-default work" style="display: none">
            <div class="panel-body">
                <div class="row">
                    <button type="button" class="btn btn-success start" onclick="startDevice()">启动
                    </button>
                    <button type="button" class="btn btn-danger pause" onclick="stopDevice()">停止
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--    右侧-->
    <div class="device-operation">
        <div class="panel panel-default operation">
            <div class="panel-heading">
                <div>设置选项</div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#workModal">设置工作模式
                    </button>
                </div>
                <div class="row">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#paramModal">设置定时器
                    </button>
                </div>
                <div class="row">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#adModal">设置AD采样
                    </button>
                </div>
                <div class="row">
                    <button type="button" class="btn btn-primary" onclick="getClock()">获取设备时间
                    </button>
                </div>
                <div class="row">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#clockModal">校正设备时间
                    </button>
                </div>
            </div>
        </div>

        <div class="panel panel-default link">
            <div class="panel-body">
                <div class="row">
                    <button type="button" class="btn btn-info" onclick="location.href='/table/table?deviceId=<?= @$_GET['deviceId'] ?>&deviceName=<?= @urlencode($_GET['deviceName']) ?>';">报表查询</button>
                </div>
                <div class="row">
                    <button type="button" class="btn btn-info" onclick="location.href='/table/charts?deviceId=<?= @$_GET['deviceId'] ?>&deviceName=<?= @urlencode($_GET['deviceName']) ?>';">历史曲线
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<?= $this->render('params_modal.php', ['deviceInfo' => $deviceInfo]) ?>
<?= $this->render('work_modal.php', ['deviceInfo' => $deviceInfo]) ?>
<?= $this->render('ad_modal.php', ['deviceInfo' => $deviceInfo]) ?>
<?= $this->render('clock_modal.php', ['deviceInfo' => $deviceInfo]) ?>
<!--daniel修改开始-->

<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>


<div id="container" style="min-width: 310px; height: 300px; margin: 0 auto;"></div>

<script>
    $.getJSON('/table/ajax?deviceId=<?= @$_GET['deviceId'] ?>', function (data) {


        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        // Create the chart
        Highcharts.stockChart('container', {
            chart: {
                events: {
                    load: function () {
                        // set up the updating of the chart each second
                        var series = this.series[0];
                        setInterval(function () {
                            $.getJSON('/table/point?deviceId=<?= @$_GET['deviceId'] ?>', function (point) {
                                if(point.length >0){
                                    series.addPoint(point[0][0], point[0][1], true, true);
                                }
                            })
                        }, 300000);
                    }
                }
            },
//            yAxis: {
//                tickPositions: [0, 0.2, 0.4, 0.6,0.8,1.0] // 指定竖轴坐标点的值
//            },
            rangeSelector: {
                buttons: [{
                    count: 1,
                    type: 'hour',
                    text: '1小时'
                }, {
                    count: 5,
                    type: 'hour',
                    text: '5小时'
                }, {
                    type: 'all',
                    text: '全天'
                }],
                inputEnabled: false,
                selected: 0
            },

            title: {
                text: '油位实时数据'
            },

            exporting: {
                enabled: false
            },

            series: [{
                name: '有效油位百分比',
                data: data
            }]
        });
    });


    $(function(){

        var switchStatus = "<?= $deviceInfo['workData']['switch1_desc'] ?>";

        var image = document.getElementById("testImg");

        if(switchStatus == "关"){
            image.classList.add('stop');
        }else{
            image.classList.remove('stop');
        }
    })
</script>


<!--动图开始-->
<div class="gif-class">
    <style>
        .gif-class{
            margin-top: -300px;
            margin-left: 303px;
        }
        .love {
            display: block;
            height: 440px;
            width: 590px;
            background: url(../images/20171220222839.jpg) 0 0 no-repeat;
            background-size: 5800%;
            animation: heart-burst steps(57) 3s infinite both;
        }
        .stop {
            animation-play-state: paused;
        }
        @keyframes heart-burst {
            0% {
                background-position: 0%;
            }
            100% {
                background-position: 100%;
            }
        }
    </style>

    <i id="testImg" class="love"></i>
</div>
<!--动图开始-->

<!--daniel修改结束-->
<script>
    deviceInfo = <?= json_encode($deviceInfo)?>;
    var deviceId = <?= json_encode($_GET['deviceId'])?>;
    var image = document.getElementById("testImg");
    console.log(deviceInfo);
    function startDevice() {
        if (confirm('确定要启动设备？')) {
            $.getJSON('/site/start-device?deviceId=' + deviceId, [], function (data) {
                if (data.status === 1) {
                    //image.classList.remove('stop');//daniel添加
                    $.showSuccessTimeout(data.message, function () {
                        location.reload();
                    });
                } else {
                    $.showErr(data.message);
                }
            })
        }
    }
    function stopDevice() {
        if (confirm('确定要停止设备？')) {
            $.getJSON('/site/stop-device?deviceId=' + deviceId, [], function (data) {
                if (data.status === 1) {
                    //image.classList.add('stop');//daniel添加
                    $.showSuccessTimeout(data.message, function () {
                        location.reload();
                    });
                } else {
                    $.showErr(data.message);
                }
            })
        }
    }
    function getClock() {
        $.getJSON('/site/get-clock', {deviceId: deviceId}, function (data) {
            alert('设备当前时间：' + data.time);
        })
    }
</script>